<template>
  <a-modal title='添加收款账户' v-model='visible' v-if='visible' width='800px' height='500px' @cancel='handleCancel' @ok='handleSubmit'>
    <f-form ref='form' :action='api.paymentDetails' v-if='visible' :form-key='this.formItem.paymentDetailsId' handler-name='hyPaymentDetailsSaveHandler'>
      <f-form-item label='收款账户' placeholder='请选择收款账户' required name='bankName' :value.sync='formItem.bankName' :trigger-change='true'>
        <a-tooltip slot='addonBefore' placement='top' title='点击图标选择付款人'>
          <a-icon type='team' style='cursor:pointer' @click='openSaleManBankModal' />
        </a-tooltip>
      </f-form-item>
      <f-form-item label='分解金额' type='number' required dataType='number' :max='formItem.settleAmount' name='settleAmount' :value='formItem.settleAmount' />
      <f-form-item label='备注' name='remark' :value.sync='formItem.remark' />
    </f-form>
    <select-sale-man-bank-modal ref='saleManBankModal' @onSelectChange='onSelectSaleManBankChange'></select-sale-man-bank-modal>
  </a-modal>
</template>
<script>
import api from "../../../js/api"
import SelectSaleManBankModal from "@/views/module/haiying/components/select_saleman_bank_modal"

export default {
  name: "TakeBankAddModal",
  props: {},
  data() {
    return {
      refs: this.$refs,
      api: Object.assign(api, this.api),
      loading: false,
      visible: false,
      isAdd: true,//是否是添加模式
      loaded: false,//是否加载完成
      formItem: this.getFormItem(),
      queryParam: {}
    }
  },

  methods: {
    getFormItem() {
      return {
        paymentDetailsId: null
      }
    },
    open(record) {
      if (record) {
        this.queryParam.saleManId = record.saleManId
        this.queryParam.paymentId = record.paymentId
        this.http.get(this, {
          url: this.api.paymentDetails.getAmountInfo,
          data: {
            paymentDetailsId: record.paymentDetailsId,
            paymentId: record.paymentId
          },
          success: function(me, data) {
            me.formItem = data
            me.visible = true
            me.loaded = true
          }
        })
      }
      this.visible = true
    },
    close() {
      this.$emit("success")
      this.visible = false
    },
    /**
     * 选择收款账户
     */
    openSaleManBankModal() {
      this.$refs["saleManBankModal"].open({
        saleManId: this.queryParam.saleManId
      })
    },
    /**
     * 付款账户选择回调
     */
    onSelectSaleManBankChange(selectedRowKeys, selectedRows) {
      this.$refs.form.getForm().setFieldsValue({ "bankName": selectedRows[0].bankName })
      this.formItem.saleManBankId = selectedRowKeys[0]
      this.formItem.bankNo = selectedRows[0].bankNo
      this.formItem.bankName = selectedRows[0].bankName
      this.formItem.payeeName = selectedRows[0].saleManName
      this.$forceUpdate()
    },
    handleCancel() {
      this.close()
    },
    handleSubmit() {
      if (this.formItem.settleAmount > 0) {
        this.$refs["form"].submit({
          saleManId: this.queryParam.saleManId,
          paymentId: this.queryParam.paymentId,
          bankName: this.formItem.bankName,
          bankNo: this.formItem.bankNo,
          saleManBankId: this.formItem.saleManBankId,
          payeeName: this.formItem.payeeName
        }, this.close)
      }else {
        this.$message.error("金额已分配完毕");
      }
    }
  },
  created() {
  },
  components: { SelectSaleManBankModal }
}
</script>

<style scoped lang='less' rel='stylesheet/less'>

</style>
